/**
 * Created by dength on 2017/04/06
 * @email 626097912@qq.com
 * 抽象导航
 */

import React, { Component } from 'react';
import {
  TouchableOpacity,
  Image,
  View,
  Text,
  StyleSheet,
  Platform,
  Dimensions
} from 'react-native';
import commonStyles from './commonStyles';

const defaultButtonHeight = 20;//左侧图片的高度

const styles = StyleSheet.create({
  navigationBar: {
    backgroundColor: commonStyles.colors.darkGrey,
    height: Platform.OS === 'ios' ? 64 : 50,
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    justifyContent: 'space-between',
    alignItems: 'center',
    // borderBottomColor: '#ccc',
    // borderBottomWidth: 0.5,
    flexDirection: 'row'
  },
  navigationBarTitleContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 80,
    right: 80,
    alignItems: 'center',
    justifyContent: 'center',
  },
  navigationBarTitle: {
    color: commonStyles.colors.white,
    fontSize: 20,
    textAlign: 'center',
    fontWeight: '800',
  },
  leftButton: {
    paddingHorizontal: 8,
    height: Platform.OS === 'ios' ? 44 : 50,
    top: Platform.OS === 'ios' ? 20 : 0,
    justifyContent: 'center',
    alignItems: 'flex-end'
  },
  rightButton: {
    paddingHorizontal: 8,
    height: Platform.OS === 'ios' ? 44 : 50,
    top: Platform.OS === 'ios' ? 20 : 0,
    justifyContent: 'center',
    alignItems: 'flex-start'

  },
  rightButtonTextStyle: {
    color: commonStyles.colors.white,
    textAlign: 'right',
    fontSize: 16,
    marginRight: 10
  },
  image: {
    height: defaultButtonHeight,
    width: defaultButtonHeight,
    position: 'relative',
  },
});

const defaultNavigationBarProps = {
  hideNav: false,
  hideLeftButton: false,
  hideRightButton: false,
};

class NavigationBar extends Component {
  constructor(props) {
    super(props);
    this.navigationBarProps = Object.assign({}, defaultNavigationBarProps, props.navigationBarProps);
    this.renderRight = this.renderRight.bind(this);
    this.renderLeftButton = this.renderLeftButton.bind(this);
    this.renderRightButton = this.renderRightButton.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.navigationBarProps = Object.assign({}, defaultNavigationBarProps, nextProps.navigationBarProps);
  }
//左边
  renderLeftButton() {
    if (this.navigationBarProps.hideLeftButton) {
      return null;
    }
    var {onLeftPressed} = this.props;
    return (
      <TouchableOpacity onPress={onLeftPressed} style={[styles.leftButton, this.navigationBarProps.leftButton]}>
        <Image style={styles.image} resizeMode="contain" source={this.navigationBarProps.leftButtonImage}>
        </Image>
      </TouchableOpacity>
    );
  }
//右边
  renderRightButton() {
    if (this.navigationBarProps.hideRightButton) {
      return null;
    }
    //优先image, text次之
    var {onRightPressed} = this.props;
    var component;
    if (this.navigationBarProps.rightButtonImage) {
      component = (
        <Image style={styles.image} resizeMode="contain" source={this.navigationBarProps.rightButtonImage} />
      );
    }
    else if (this.navigationBarProps.rightTitle && this.navigationBarProps.rightTitle !== '') {
      component = (
        <Text style={[styles.rightButtonTextStyle, this.navigationBarProps.rightButtonTextStyle]}>{this.navigationBarProps.rightTitle}</Text>
      );
    } else {
      return null;
    }

    return (
      <TouchableOpacity onPress={onRightPressed} style={[styles.rightButton, this.navigationBarProps.rightButton]}>
        {component}
      </TouchableOpacity>
    );
  }

  //右侧
  renderRight() {
    return (
      <View style={{ flexDirection: 'row' }}>
        {this.renderRightButton()}
      </View>
    );
  }

  render() {
    var {hideNav, title} = this.navigationBarProps;
    if (hideNav) {
      return null;
    }
    return (
      <View style={[styles.navigationBar, this.navigationBarProps.navigationBar]}>
        {this.renderLeftButton()}
        {this.renderRight()}
        <View style={styles.navigationBarTitleContainer}>
          <Text numberOfLines={1} style={[styles.navigationBarTitle, this.navigationBarProps.navigationBarTitle]}>{title}</Text>
        </View>
      </View>
    );
  }
}

export default NavigationBar;
